<template>
  <div class="wrap" v-permission="'我的'">
    <div class="top">
      <div class="top-content flex flexC">
        <!-- <nut-image
					src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
					class="nut-image"
					round
				/> -->
        <nut-image
          round
          class="nutImg"
          showError
          :src="listData.info?.avatar"
          @click="handlejump"
        >
          <template #error>
            <nut-image
              round
              class="nutImg"
              src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
            />
          </template>
        </nut-image>
        <div class="top-txt">{{ listData.info?.nickname }}</div>
        <div class="tips flex flexC" @click="changeStatus">
          <img class="chang-icon" src="../../assets/center/change.png" />
          <div class="name">{{ isCollapse ? "团长" : "团员" }}</div>
        </div>
      </div>
    </div>
    <div class="center" v-if="isCollapse">
      <div class="center-top">
        <div class="center-top-centent flex flexBetween flexC">
          <div>
            <div class="yue-txt">账户余额</div>
            <div class="money">{{ getCXBalance() ? getCXBalance() : 0 }}</div>
          </div>

          <!-- <img
            src="../../assets/center/ti.png"
            class="ti-icon"
            @click="withdrawal"
            v-preventReClick
          /> -->
        </div>
      </div>
      <div class="center-centent">
        <div class="center-data">数据中心</div>
        <div class="flex flexC data-content">
          <div class="f1">
            <div class="data-money">
              <span style="font-size: 13px; font-weight: bolder">¥</span>
              <span>{{ centerData.today_order_money }}</span>
            </div>
            <div class="data-txt">今日订单金额</div>
          </div>
          <nut-divider direction="vertical" />
          <div class="f1">
            <div class="data-money">{{ centerData.today_order_count }}</div>
            <div class="data-txt">今日订单数量</div>
          </div>
          <nut-divider direction="vertical" />
          <div class="f1">
            <div class="data-money">{{ centerData.today_order_person }}</div>
            <div class="data-txt">今日订单人数</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="center-data">团长功能</div>
        <div class="flex flexwarp flexC card-content">
          <div
            v-for="item in tuanlist"
            :key="item.title"
            class="center-data-iconbox"
            @click="handleRouter(item)"
          >
            <img class="tuan-icon" :src="item.icon" />
            <div class="tuan-txt">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center" v-else>
      <div class="center-top">
        <div class="center-top-centent flex flexBetween flexC">
          <div>
            <div class="yue-txt">账户余额</div>
            <div class="money">{{ getCXBalance() ? getCXBalance() : 0 }}</div>
          </div>

          <!-- <img
            src="../../assets/center/ti.png"
            class="ti-icon"
            @click="withdrawal"
            v-preventReClick
          /> -->
        </div>
      </div>
      <div class="card">
        <div class="center-data">团员功能</div>
        <div class="flex flexwarp flexC card-content">
          <div
            v-for="item in tuanYuanlist"
            :key="item.title"
            class="center-data-iconbox"
            @click="handleRouter(item)"
          >
            <img class="tuan-icon" :src="item.icon" />
            <div class="tuan-txt">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, computed } from "vue";
import { centerStore } from "@/store/center/index";
import useCenter from "@/composable/center/userCenter";
import { getCXBalance } from "@/utils/auth";
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
const {
  tuanlist,
  changeStatus,
  tuanYuanlist,
  handleRouter,
  listData,
  handlejump,
  centerData,
} = useCenter();

const store = centerStore();
//获取选项卡的数据
const isCollapse = computed(() => {
  return store.getCollapse;
});

//诚信提现
const withdrawal = () => {
  // proxy.$cxWithdrawal.toWithdraw();
};
</script>
<style scoped lang="scss">
.wrap {
  // height: 100%;
  background: #f8f9fa;
  position: relative;

  .top {
    width: 100%;
    height: 354px;
    background: url("../../assets/center/topbg.png") no-repeat center;
    background-size: 100% 100%;

    .top-content {
      padding: 70px 30px 0 30px;

      .nut-image {
        width: 120px !important;
        height: 120px !important;
        background: #fff;
        border: 4px solid #fff;
      }
    }

    .top-txt {
      font-size: 34px;
      font-weight: bolder;
      padding: 0 10px;
      color: #000000;
    }

    .tips {
      border: 2px solid #666;
      border-radius: 10px;
      text-align: center;
      .chang-icon {
        width: 16px;
        padding: 10px 10px;
      }

      .name {
        font-size: 22px;
        color: #444d43;
        padding: 0px 10px 0 0;
      }
    }
  }

  .center {
    position: absolute;
    top: 244px;
    height: 200px;
    left: 30px;
    right: 30px;

    .center-top {
      width: 100%;
      height: 108px;
      background: url("../../assets/center/bg.png") no-repeat center;
      background-size: 100% 100%;
      border-radius: 30px 30px 0 0;
      .center-top-centent {
        padding: 12px 30px 14px 30px;
        .yue-txt {
          font-size: 24px;
          color: #ffe4bf;
        }
        .money {
          position: relative;
          color: #fff;
          font-size: 40px;
          padding-right: 10px;
          &::after {
            content: " 元";
            position: absolute;
            font-size: 24px;
            bottom: 8px;
            padding-left: 10px;
          }
        }
        .ti-icon {
          display: block;
          width: 120px;
        }
      }
    }
    .center-centent {
      padding: 30px 30px;
      background: #fff;
      border-radius: 0 0 20px 20px;
    }
    .center-data {
      color: #000;
      font-size: 34px;
      font-weight: 500;
    }
    .data-money {
      position: relative;
      font-size: 30px;
      color: #000;
      text-align: center;
      font-weight: 500;
    }
    .data-txt {
      font-size: 24px;
      color: #666;
      text-align: center;
    }
    .nut-divider.nut-divider-vertical {
      height: 90px !important;
    }
    .data-content {
      padding: 30px 0;
    }
    .card {
      margin: 20px 0;
      background: #fff;
      border-radius: 20px;
      padding: 30px 30px;
      .tuan-icon {
        display: block;
        width: 56px;
        height: 56px;
        margin: 0 auto;
      }
      .tuan-txt {
        font-size: 24px;
        text-align: center;
        padding-top: 14px;
      }
      .center-data-iconbox {
        width: 25%;
        padding: 30px 0;
      }
      .card-content {
        padding-top: 30px;
      }
    }
  }
}
</style>
